<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/one.css" />
		<script src="../js/Chinese.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/English.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="main">
			<header>
				<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/one.html"><div id="logn">
				</div></a>
				<div id="top-nav">
					<p>中国</p>
					<div id="nav-up-right">
						<select onchange="sell(this)">
							<option>Select Language</option>
							<option>English</option>
							<option>Chinese</option>
						</select>
						<span> &nbsp;&nbsp;|&nbsp; </span>
						<a href="###">进入全球官网</a>
					</div>
					<ul id="nav-contain">
						<li id="nav-news">
							<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/news.html">新闻动态</a>
						</li>
						<li id="nav-food">
							<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/food.html">美食与营养</a>
							<ul id="nav-food-menu">
								<li>
									<a href="">超值 Value</a>
								</li>
								<li>
									<a href="">经典 Classics</a>
								</li>
								<li>
									<a href="">低脂 Low Fat</a>
								</li>
								<li>
									<a href="">精选 Premlum</a>
								</li>
								<li>
									<a href="">百味卷 Wrap</a>
								</li>
								<li>
									<a href="">沙拉 Salad</a>
								</li>
								<li>
									<a href="">聚餐服务 Catering</a>
								</li>
								<li>
									<a href="">饮料喝小食 Drinks & Sides</a>
								</li>
								<li>
									<a href="">早餐 BREAKFAST</a>
								</li>
								<li>
									<a href="">营养 Nutrition</a>
								</li>
								<li>
									<a href="">如何点餐 How To Order</a>
								</li>
							</ul>
						</li>
						<li id="nav-go">
							<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/alie.html">加盟流程</a>
						</li>
						<li id="nav-us">
							<a href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/us.html">关于我们</a>
						</li>
						<li id="nav-search">
							<a href="">快餐位置查询</a>
						</li>
					</ul>
				</div>
			</header>
			<div id="middle">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="../img/9k=-3.jpg" /></div>
						<div class="swiper-slide"><img src="../img/2Q==-3.jpg" /></div>
					</div>
					<div class="swiper-button-prev"> ＜ </div>
					<div class="swiper-button-next"> ＞ </div>
				</div>
				<div class="swiper-container2" id="contain-two">
					
					<div class="swiper-wrapper" id="wrapper-two">
						<div class="swiper-slide" id="haha">
							<img src="../img/pic2.jpg" />
						    <div id="slide-chage-one">
						    	    <div id="slide-chage-one-top"></div>
						    	    <div id="slide-chage-one-down"></div>
						    </div>
						</div>
						<div class="swiper-slide">
							<img src="../img/pic3.jpg" />
							<div id="slide-chage-two">
						    	    <div id="slide-chage-two-top"></div>
						    	    <div id="slide-chage-two-down"></div>
						   </div>
						</div>
						<div class="swiper-slide">
							<img src="../img/DF68BC886A34E9768CA4AAB3F95DBCD8.jpg" />
							<div id="slide-chage-three">
						    	    <div id="slide-chage-three-top"></div>
						    	    <div id="slide-chage-three-down"></div>
						   </div>
						</div>
					</div>
				</div>
			</div>
			<div id="main-down">
				<ul>
					<li><a id="down-location" href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/two.html"></a></li>
					<li><a id="down-get" href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/three.html"></a></li>
					<li><a id="down-active" href="http://192.168.0.195:8020/%E8%B5%9B%E7%99%BE%E5%91%B3%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93/homePage/four.html"></a></li>
					<li><a id="down-sina" href="http://weibo.com/subwayrestaurantcn"></a></li>
					<li><a id="down-wechat"  href=""></a></li>
					<div id="wechat-img">
						<img src="../img/38A.png"/>
					</div>
				</ul>
				<p>主页 | 菜单/营养 | 如何加盟 | 关于我们 | 快餐店位置查询 <br />
联系我们 | 使用条款 | 隐私权政策 | SUBWAY Partners™ <br /><br />

SUBWAY® is a Registered Trademark of Subway IP Inc. <br />
®2016 Subway IP Inc.</p>
			</div>
		</div>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var navFood = document.getElementById("nav-food")
			var navFoodMenu = document.getElementById("nav-food-menu")
			var midSmallLi = document.querySelectorAll("#nav-food-menu>li")
			var navContain = document.getElementById("nav-contain")
			var navLiArr = document.querySelectorAll("#nav-contain>li")
			var swiperWrapper = document.getElementsByClassName("swiper-wrapper")[0]
			var swiperContain = document.getElementsByClassName("swiper-container")[0]
			var slideChageOne = document.getElementById("slide-chage-one")
			var slideChageOneTop = document.getElementById("slide-chage-one-top")
			var slideChageOneDown = document.getElementById("slide-chage-one-down")
			var slideChageTwo = document.getElementById("slide-chage-two")
			var slideChageTwoTop = document.getElementById("slide-chage-two-top")
			var slideChageTwoDown = document.getElementById("slide-chage-two-down")
			var slideChagethree = document.getElementById("slide-chage-three")
			var slideChagethreeTop = document.getElementById("slide-chage-three-top")
			var slideChagethreeDown = document.getElementById("slide-chage-three-down")
			var downLocation = document.getElementById("down-location")
			var navContainArr = document.querySelectorAll("#nav-contain>li>a")
			var speed = 5
			var speed2 = 30
			var main = document.getElementById("main")
			var downWechat = document.getElementById("down-wechat")
			var haha = document.getElementById("haha")
			var wechatImg = document.getElementById("wechat-img")
			var middleLocation = document.getElementById("middle-location")
			var middle = document.getElementById("middle")
			var sel = document.querySelectorAll("#nav-up-right>select")
			var mainDownArr = document.querySelectorAll("#main-down>ul>li>a")
			console.log(mainDownArr)
			console.log(sel.value)
			navContain.onmouseover = function(ev) {
				ev.target.style.color = "yellow"
			}
			navContain.onmouseout = function(ev) {
				ev.target.style.color = "white"
			}

			navFood.onmouseenter = function() {
				navFoodMenu.style.display = "block"
			}
			navFood.onmouseleave = function() {
				navFoodMenu.style.display = "none"
			}
			var mySwiper = new Swiper('.swiper-container', {
				autoplay: 3000,
				prevButton: '.swiper-button-prev',
				nextButton: '.swiper-button-next',
				autoplayDisableOnInteraction: false,
				effect: 'fade',
				fade: {
					crossFade: true,
				}
			})
			var mySwiper2 = new Swiper('.swiper-container2', {
				autoplay: 4590,
				autoplayDisableOnInteraction: false,
				effect: 'fade',
				fade: {
					crossFade: true,
				}
			})
			swiperWrapper.onclick = function(ev) {
				var one = ev.target.src
				window.location.href = one
			}
			var z = true
			function moveDiv (one,oneTop,oneDown) {
				var t = setInterval(function () {
				one.style.height = one.offsetHeight + speed + "px"  
				if (one.offsetHeight >= 150) {
						one.style.height = "150px"
						oneTop.style.left = oneTop.offsetLeft + speed2 + "px"
						if (oneTop.offsetLeft >= 0) {
							oneTop.style.left = 0
							oneDown.style.left = oneDown.offsetLeft + speed2 + "px"
							if (oneDown.offsetLeft >= 0) {
								oneDown.style.left = 0
								clearInterval(t)
								z = false
								setTimeout(function () {
				                 moveReturn(one,oneTop,oneDown)
			           },1500)
							}
						}
				}
			},30)
			}
			function moveReturn (one,oneTop,oneDown) {
				var t2 = setInterval(function () {
				if (z == false) {
					oneDown.style.left = oneDown.offsetLeft - speed2 + "px"	
					if (oneDown.offsetLeft <= -290) {
						oneDown.style.left = "-290px"
						oneTop.style.left = oneTop.offsetLeft - speed2 + "px"
						if (oneTop.offsetLeft <= -290) {
							oneTop.style.left = "-290px"
							one.style.height = one.offsetHeight - speed + "px" 
							if (one.offsetHeight <= 0) {
								clearInterval(t2)
								z = true
							}
						}
					}
				}
			},30)
			}
			moveDiv(slideChageOne,slideChageOneTop,slideChageOneDown)
		        setInterval(function () {
		        	 moveDiv(slideChageOne,slideChageOneTop,slideChageOneDown)
		        },14600)
			setTimeout(function () {
				moveDiv(slideChageTwo,slideChageTwoTop,slideChageTwoDown)
				setInterval(function () {
		        	 moveDiv(slideChageTwo,slideChageTwoTop,slideChageTwoDown)
		        },14600)
			},5000)
			setTimeout(function () {
				moveDiv(slideChagethree,slideChagethreeTop,slideChagethreeDown)
				setInterval(function () {
		        	 moveDiv(slideChagethree,slideChagethreeTop,slideChagethreeDown)
		        },14600)
			},10000)
			
			downWechat.onmouseover = function () {
				wechatImg.style.display = "block"
				wechatImg.style.top = main.offsetHeight - 250 + "px"
			}
			downWechat.onmouseout = function () {
				wechatImg.style.display = "none"
			}
			
			function sell (ev) {
				console.log(ev.value)
				if (ev.value == "English") {
					setting(enObj)
				}if (ev.value == "Chinese") {
					setting(chObj)
				}
			}
			function setting (obj) {
				document.querySelectorAll("#top-nav>p")[0].innerHTML = obj.navTop[0]
				document.querySelectorAll("#nav-up-right>a")[0].innerHTML = obj.navTop[1]
				for (var i = 0;i < navContainArr.length;i++) {
					navContainArr[i].innerHTML = obj.navBottom[i]
				}
				for (var i = 0;i < midSmallLi.length;i++) {
					midSmallLi[i].innerHTML = obj.smallLi[i]
				}
				for (var i = 0;i < mainDownArr.length;i++) {
					mainDownArr[i].style.background = "url("+ obj.BottomImg1[i] + ")"
				}
			}
			
		</script>

	</body>

</html>